<template>
  <div>
    <el-container>
      <el-aside width="210px" style="overflow:hidden" class="leftbar_bg">
        <el-menu :defaultActive="activeIndex">
          <template v-for="(item , idx) in sideMenu">

            <el-menu-item :index="item.loadpage" :key="idx" @click="addTab(item)" style="text-align:left">
              <i class="iconfont icon-renwujihua" v-if="item.id=='10801'"></i>
              <i class="iconfont icon-icon-test1" v-if="item.id=='10802'"></i>
              <i class="iconfont icon-tianshenpi" v-if="item.id=='10803'"></i>

              <i class="iconfont icon-tianshenpi" v-if="item.id=='10805'"></i>
              <i class="iconfont icon-renwujihua" v-if="item.id=='10806'"></i>
              <i class="iconfont icon-icon-test1" v-if="item.id=='10807'"></i>
              &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>
      <el-container class="main_bg">
        <el-main>
          <el-tabs v-model="editableTabsValue" type="border-card" closable @tab-remove="removeTab"
            @tab-click="tabclick"
          >
            <el-tab-pane
              v-for="item in editableTabs"
              :key="item.name"
              :label="item.title"
              :name="item.name"
            >
              <reimlist v-if="item.id=='10801'"></reimlist>
              <moneylist v-if="item.id=='10802'"></moneylist>
              <leavelist v-if="item.id=='10803'"></leavelist>

              <goout v-if="item.id=='10805'"></goout>
              <checkfee v-if="item.id=='10806'"></checkfee>
              <carfee v-if="item.id=='10807'"></carfee>
            </el-tab-pane>
          </el-tabs>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import reimlist from '~/components/querysum/reim/reimlist.vue';
import moneylist from '~/components/querysum/money/reimlist.vue';
import leavelist from '~/components/querysum/leave/reimlist.vue';

import goout from '~/components/querysum/goout/reimlist.vue';
import checkfee from '~/components/querysum/checkfee/reimlist.vue';
import carfee from '~/components/querysum/carfee/reimlist.vue';

export default {
  data() {
    return {
      activeIndex: '',
      sideMenu: [],
      ts: this.newStore(),
      data: null,
      editableTabsValue: null,
      editableTabs: [],
    };
  },
  components: {
    reimlist, moneylist, leavelist, goout, checkfee, carfee,
  },
  // computed: {
  //   activeIndex() {
  //     return this.$route.path;
  //   },
  // },
  created() {
    console.log(this.$route.path);

    this.getSidemenu();
  },
  methods: {
    tabclick(tab) {
      console.log(tab);
      this.activeIndex = tab.name;
    },
    addTab(item) {
      // console.log(item);
      this.$nextTick(() => {
        let ishas = false;
        const tabdata = {
          title: item.name,
          name: item.loadpage,
          id: item.id,
          content: '',
        };
        for (let i = 0; i < this.editableTabs.length; i += 1) {
          if (this.editableTabs[i].name == tabdata.name) {
            ishas = true;
            break;
          }
        }
        if (!ishas) {
          this.editableTabs.push(tabdata);
        }
        this.editableTabsValue = item.loadpage;
      });
    },
    removeTab(targetName) {
      const tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B843B7A441565EC6C4A6860EBB8D9E769',
        supid: '108',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.data = ts.d.data.operation1[0].hash.privstr;
        this.sideMenu = JSON.parse(this.data);
        this.activeIndex = this.sideMenu[0].loadpage;
        this.addTab(this.sideMenu[0]);
      });
    },
  },
};

</script>


<style lang="stylus" socped>
.el-menu-item:focus, .el-menu-item:hover{
  background #fff
  color #000
}

.el-menu-item:nth-child(1):focus, .el-menu-item:nth-child(1):hover {
  background: #fff;
  color: #000;
}
.el-menu
  border 0
.el-menu-item:focus i, .el-menu-item:hover i{
  color: #000!important;
}
.el-menu-item
  background rgb(50, 50, 59)
  text-align center
  color #fff
.el-menu-item i
  font-size 20px
  float left

.el-menu-item.is-active {
  background: #fff;
  color: #000;
}
  .el-menu-item i {
  color: #fff;
}
</style>
